<template>
  <div>
    <el-button @click="visibility = true">新增</el-button>
    <el-dialog :visible.sync="visibility">
      <el-form
        ref="player"
        class="player"
        :model="player"
        :rules="rules"
        label-position="right"
        label-width="120px"
      >
        <!--       usernameFk: "2016207055",
                nickname: "小明",
                profession: "architect",
                goldCoin: 40,
                silverCoin: 60,-->
        <el-form-item prop="usernameFk" label="用户名：">
          <el-input v-model.trim="player.usernameFk"></el-input>
        </el-form-item>

        <el-form-item prop="nickname" label="昵称：">
          <el-input v-model.trim="player.nickname"></el-input>
        </el-form-item>
        <el-form-item prop="profession" label="职业：">
            <el-select v-model="player.profession">
                <el-option v-for="e in $store.state.professionTypes"
                           :key="e.index" :value="e.value" :label="e.text"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="goldCoin" label="金币：">
          <el-input v-model.number="player.goldCoin"></el-input>
        </el-form-item>
        <el-form-item prop="silverCoin" label="银币：">
          <el-input v-model.number="player.silverCoin"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" @click="playerSubmit()"
            >提交
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => $refs.player.resetFields()"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import New from './components/New.vue';
export default {
  name: "InsertPlayer",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      player: {
        usernameFk: "2016207055",
        nickname: "",
        profession: "architect",
        goldCoin: 80,
        silverCoin: 80,
        // --------
        playerCode: "",
        playerId: 0,
        version: 0,
      },
      visibility: false,
      // rules: {
      //     username: [
      //         {required: true,   message: '请输入账号', trigger: 'blur'},
      //         {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur','change']},
      //         { validator:this.validateItem ,trigger:'blur'}
      //         ],
      //     password: [
      //         {required: true, message: '请输入密码', trigger: 'blur'},
      //         ],
      //     }
      rules: {
        usernameFk: [{ validator: this.valiUsernameFk, trigger: "blur" }],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    valiUsernameFk(rules, value, callback) {
      if (value.length < 5 || value.length > 10) {
        callback(new Error("长度必须在5-10之间"));
        return;
      }
      if (!value.startsWith("2016")) {
        callback(new Error("必须2016开头"));
        return;
      }
      if (!/^\d{5,10}$/.test(value)) {
        callback(new Error("不符合全部是数字"));
      }
      callback();
    },
    playerSubmit() {
      this.$refs.player.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/ceto/player/insert",
            data: this.player,
          }).then(
            (res) => {
              // this.$message.warning(JSON.stringify(res.data));
              if (res.data.playerId) {
                this.visibility=false;
                this.$emit("onSubmit",1)
              };
            },
            (error) => {
              console.log(" request error : " + error.response.status);
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
    .el-form{
        width: 320px;
    }
</style>
